<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form  ref="form" :model="detail" label-width="100px" class="form">
		  <el-form-item label="区域">
		  	<el-cascader  v-model="detail.regionId" :options="areaList" :props="{
		    value: 'id',
		    label: 'title'
		  }" />
		  </el-form-item>
        <el-form-item label="小区名称">
          <el-input v-model="detail.name" />
        </el-form-item>
        <el-form-item label="平均房价">
          <el-input v-model="detail.unitPrice" />
        </el-form-item>
        <el-form-item label="建筑年代">
          <el-input v-model="detail.completionYear" />
        </el-form-item>
        <el-form-item label="总户数">
          <el-input v-model="detail.totalFamily" />
        </el-form-item>
        <el-form-item label="在售房源">
          <el-input v-model="detail.onSale" />
        </el-form-item>
        <el-form-item label="总楼栋数">
          <el-input v-model="detail.totalHouse" />
        </el-form-item>
        <el-form-item label="产权描述">
          <el-input v-model="detail.propertyRight" />
        </el-form-item>
        <el-form-item label="物业费">
          <el-input v-model="detail.propertyFee" placeholder="元/m²/月" />

        </el-form-item>
		<el-form-item label="经度">
		  <el-input v-model="detail.longitude" placeholder="" />
		
		</el-form-item>
		<el-form-item label="纬度">
		  <el-input v-model="detail.latitude" placeholder="" />
		
		</el-form-item>
		<el-form-item label="详细地址">
		  <el-input v-model="detail.address" placeholder="" />
		
		</el-form-item>
        <el-form-item label="绿化率">
          <el-input v-model="detail.greeningRate" />
        </el-form-item>
        <el-form-item label="建筑类型">
          <el-select v-model="detail.houseType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_house_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="小区介绍">
          <el-input
            v-model="detail.remark"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
		
		<el-form-item label="停车位">
		  <el-input v-model="detail.carNum" />
		</el-form-item>
		<el-form-item label="在租房源">
		  <el-input v-model="detail.onRenting" />
		</el-form-item>
		<el-form-item label="开发商">
		  <el-input v-model="detail.investor" />
		</el-form-item>
		<el-form-item label="物业公司">
		  <el-input v-model="detail.propertyCompany" />
		</el-form-item>
		<el-form-item label="权属类型">
		  <el-input v-model="detail.ownershipType" />
		</el-form-item>
        <el-form-item v-if="$route.query.item" label="小区图片">
          <div class="picList">
            <div v-for="(item,index) in resourcesList" class="item">
              <img class="pic" :src="item.pictureUrl" alt>
              <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" />
            </div>
          </div>
          <div v-if="resourcesList.length < 10" class="item itemNo">
            <el-upload
              :action="Is.sevenDomain"
              :multiple="false"
              name="file"
			   :limit="10" multiple 
              :show-file-list="false"
              :before-upload="handleUpload"
              :on-success="handleSuccess"
            >
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传10张，且不超过10M</div>
              <div class="el-upload el-upload--picture-card">
                <i slot="default" class="el-icon-plus" />
              </div>
            </el-upload>
          </div>
        </el-form-item>
		<el-form-item  label="封面图片">
          <div class="picList" v-if="detail.showPictures">
            <div class="item">
              <img class="pic" :src="detail.showPictures" alt>
              <i class="el-icon-delete delIcon hand" @click="handlesRemove(item,index)" />
            </div>
          </div>
          <div v-if="!detail.showPictures" class="item itemNo">
            <el-upload
              :action="Is.sevenDomain"
              :multiple="false"
              name="file"
              :limit="1"
              :show-file-list="false"
              :before-upload="handleUpload"
              :on-success="handlesSuccess"
            >
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，只能上传1张，且不超过10M</div>
              <div class="el-upload el-upload--picture-card">
                <i slot="default" class="el-icon-plus" />
              </div>
            </el-upload>
          </div>
        </el-form-item>
		<el-form-item v-if="$route.query.item" label="小区视频">
		  <el-upload
		    accept="video/mp4"
		    :action="Is.sevenDomain"
		    :file-list="fileListIntroduce"
		    :show-file-list="true"
		    :before-remove="(res)=>{detail.videoPath='';return true}"
		    :on-success="(res,file)=>{if(res.code == 200){detail.videoPath='';detail.videoPath=res.data;}}"
		  >
		    <span
		      slot="tip"
		      class="el-upload__tip"
		      style="padding-left:15px;"
		    >建议上传mp4格式视频</span>
		    <div class="avatarWrap">
		      <el-button type="success" round class="button">点击上传</el-button>
		    </div>
		  </el-upload>
		</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancel">返回</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
import { resourcesAdd, resourcesList, resourcesDelete, typeListSon, residentialAdd, residentialUpdate,areaList } from '@/api/api'
export default {
  data() {
    return {
      resourcesAdd: resourcesAdd,
      resourcesList: [],
      fileList: [],
	  areaList: [],
      buildingTypeOptions: [],
      postIdOptions: [
        {
          value: 1,
          label: 'APP端'
        },
        {
          value: 2,
          label: 'PC端'
        }],
      detail: {
        'buildingType': '',
        'completionYear': '',
        'developersName': '',
        'greeningRate': '',
        'name': '',
        'onSale': 0,
        'propertyFee': 0,
        'propertyRight': '',
        'remark': '',
        'totalFamily': 0,
        'totalHouse': 0,
        'unitPrice': 0,
		'longitude':0,
		'latitude':0,
		'address':'',
		'regionId':'',
		'carNum':0,
		'investor':0,
		'propertyCompany':0,
		'ownershipType':0,
		'onRenting':0,
		'videoPath':'',
		'showPictures':''
      }
    }
  },
  created() {
	  areaList('b0cfac5e-7d09-45ae-a909-0dcb679add58').then(({
	  	data
	  }) => {
	  	this.areaList = data
	  })
    if (this.$route.query.item) {
      this.detail = JSON.parse(this.$route.query.item);
	  console.log(this.detail )
    }
    resourcesList(this.detail.id).then(({ data }) => {
      this.resourcesList = data
    })
  },
  methods: {
    getMb() {
      // 建筑类型
      typeListSon('8e612c9d4a0dc5f7c3ef76df6e394091').then(({ data }) => {
        this.buildingTypeOptions = data
      })
    },
    handleRemove(item, index) {
      resourcesDelete([item.id]).then(data => {
        Is.tip('删除成功')
        this.resourcesList.splice(index, 1)
      })
    },
	handlesRemove(item, index) {
	      this.detail.showPictures=''
	    },
    // 上传图片之前的验证
    handleUpload() {
    },
    // 上传成功之后的回调
    handleSuccess(res) {
      if (res.code === 200) {
        resourcesAdd({
          dataId: this.detail.id,
          resourcesList: [{ pictureUrl: res.data, type: 'hou_house_xiaoqu_show_pictures' }]
        }).then(data => {
          Is.tip('上传成功')
          resourcesList(this.detail.id).then(({ data }) => {
            this.resourcesList = data
          })
        })
      }
    },
	handlesSuccess(res) {
	  if (res.code === 200) {
	   this.detail.showPictures=res.data
	  }
	},
    // 添加/编辑
    submit() {
      // 验证不通过则不提交
	  var prad=this.detail;
	  prad.regionId=this.detail.regionId.toString();
      if (!this.vertify()) {
        return false
      }
      if (this.$route.query.item) {
        // 编辑
        residentialUpdate(prad).then(data => {
          Is.tip('编辑成功', 2000, 'success')
          this.$router.back()
        })
      } else {
        // 新增
        residentialAdd(prad).then(data => {
          Is.tip('添加成功', 2000, 'success')
          this.$router.back()
        })
      }
    },
	handleChangeArea(value) {
		try {
			return areaList(value.value).then(({
				data
			}) => {
				return data
			})
		} catch (e) {
	
		}
	},
    // 返回
    cancel() {
      this.$router.back()
    },
    vertify() {
      // if (Is.empty(this.detail.title)) {
      //   Is.tip('请输入标题')
      //   return false
      // }
      return true
    }
  }}
</script>
